<template>
    <Carousel></Carousel>
    <Input></Input>

    <el-row :gutter="20">
      <el-col :span="20">
        <Level @getLevel="reqLevel"/>
        <Region @getRegion="reqRegion"/>
        <div class="hospital" v-if="cardList?.length!==0">
          <Card class="item"
            v-for="(item, index) in cardList"
            @click="navigate(item)"
            :key="index"
            :hospitalInfo="item"/>
        </div>
        <el-empty v-else description="没有医院" />
        
        <el-pagination
          :background="true"
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[4, 6, 8]"
          :small="true"
          layout="prev, pager, next, jumper, ->, sizes, total"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-col>

      <el-col :span="4"> <Tip/> </el-col>
    </el-row>

</template>

<script setup lang='ts'>
import { ref,onMounted } from 'vue'
import Carousel from '@/components/Carousel/Carousel.vue'
import Input from "./Input/index.vue"
import Level from "./Level/index.vue"
import Region from "./Region/index.vue"
import Tip from "./Tip/index.vue"
import Card from "./Card/index.vue"
import {reqHospital} from "@/api/home/index"
import { useRouter } from 'vue-router'

const cardList=ref();
const currentPage4=ref(1);
const pageSize4=ref(4);
let total=ref();


//分页器
const handleSizeChange=()=>{
  getHospital(currentPage4.value,pageSize4.value)
}

const handleCurrentChange=()=>{
  getHospital(currentPage4.value,pageSize4.value)
}

onMounted( ()=>{
  getHospital(currentPage4.value,pageSize4.value)
});

const getHospital=async (page:number,limit:number,hostype:string="", districtCode?:string)=>{
  let result=await reqHospital(page,limit,hostype, districtCode);
   if (result.code == 200) {
    //存储已有的医院的数据
    cardList.value = result.data.content;
    //存储医院的总个数
    total.value = result.data.totalElements;
  }
}

//点击地区或水平
const reqLevel=(value:any)=>{
  getHospital(currentPage4.value,pageSize4.value,value)
}

const reqRegion=(value:any)=>{
  getHospital(currentPage4.value,pageSize4.value,"",value)
}

const router=useRouter()
const navigate=(item:any)=>{
  router.push({path:"/hospital/register",query:{hoscode:item.hoscode}})
}

</script>

<script lang="ts">
export default {
    name:"home"
}
</script>

<style scoped lang="scss">
.hospital {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .item {
    width: 48%;
    margin: 10px 0px;
  }
}
</style>
